<template>
	<view class="page">
		<hx-navbar title="我的消息" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="ytx"></view>
		<view class="main">
			<view class="main-box flex align-center">
					<view class="main-img">
						<image src="../../static/imgs/xtxx.png" mode="aspectFit"></image>
					</view>
					<view class="flex justify-between align-center" style="flex: 1;">
						<view class="">
							<view class="text-bold">
								系统消息
							</view>
							<view class="text-df">
								你有多条未读系统消息
							</view>
						</view>
						<view class="" style="position: relative;">
							
							<view class="tsyq">
								2
							</view>
							<view class="cuIcon-right"></view>
						</view>
						
					</view>
			</view>
			<view class="main-box flex align-center">
					<view class="main-img">
						<image src="../../static/imgs/lylxx.png" mode="aspectFit"></image>
					</view>
					<view class="flex justify-between align-center" style="flex: 1;">
						<view class="">
							<view class="text-bold">
								聊一聊消息
							</view>
							<view class="text-df">
								暂时没有互动消息哦
							</view>
						</view>
						<view class="" style="position: relative;">
							
							<view class="tsyq">
								2
							</view>
							<view class="cuIcon-right"></view>
						</view>
						
					</view>
			</view><view class="main-box flex align-center">
					<view class="main-img">
						<image src="../../static/imgs/ddwkxx.png" mode="aspectFit"></image>
					</view>
					<view class="flex justify-between align-center" style="flex: 1;">
						<view class="">
							<view class="text-bold">
								订单物流消息
							</view>
							<view class="text-df">
								暂时没有订单物流消息哦
							</view>
						</view>
						<view class="" style="position: relative;">
							
							<view class="tsyq">
								2
							</view>
							<view class="cuIcon-right"></view>
						</view>
						
					</view>
			</view>
			
		</view>
	</view>
</template>

<script>
</script>

<style>
	.main{
		padding-top: 20rpx;
	}
	.main-box{
		padding: 0rpx 50rpx 0rpx 30rpx;
	}
	.main-img image{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}
	.ytx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.text-bold{
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}
	.main-box .flex.justify-between.align-center{
		margin-left: 30rpx;
		padding: 30rpx 0;
		border-bottom: 2rpx #EDEDED solid;
		position: relative;
	}
	.tsyq{
		width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		border-radius: 50%;
		background-color: #E93534;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		top: -4rpx;
		right: 40rpx;
	}
</style>
